<template>
    <div class="ablums">
        <div class="top50">
            <div class="top_img">
                <div class="top">TOP</div>
                <div class="fif">50</div>
            </div>
            <div class="songs">
                <div class="title">热门歌50首</div>
                <hotSongs v-if="hotSongs" :hotSongs ="hotSongs" />
            </div>
        </div>
        <ablum :ablums = "ablums" />
    </div>
</template>

<script>
import hotSongs from '../../content/playList/hotSongs'
import ablum from './ablum'
import {_getArtistAlbum} from '../../../network/artists'
export default {
    name: '',
    props: [
        'hotSongs',
        
    ],
    data() {
        return {
            ablums:null,
        };
    },
    computed: {

    },
    created() {
        _getArtistAlbum(this.$route.query.id)
        .then(res => {
            this.ablums = res.data.hotAlbums
        })
    },
    mounted() {

    },
    watch: {

    },
    methods: {

    },
    components: {
        hotSongs,
        ablum
    },
};
</script>

<style scoped lang="less">
@itemecolor:#E03F40;
@infoColor:#ccc;
@more:#666666;
@textColor:#fff;
@backColor:#2f3640;
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.ablums{
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
    .top50{
        .position_flex(flex-start,top);
        .top_img{
            width:150px;
            height:150px;
            color: @textColor;
            background-color: #192a56;
            div{
                 font-style: italic;
                 margin-left: 40%;
                 font-size: 40px;
                 font-weight: bold;
                 
            }
            .top{
                margin-top: 30px;
                transform: translateX(-40%);
            }
            .fif{
                font-size: 50px;
            }
        }
        .songs{
            width: 90%;
            margin-left: 50px;
            
        }
    }

}
</style>
